<!doctype html>
[#escape x as (x)!?html]
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>${article.title} - ${site.title}</title>
  <meta name="keywords" content="${article.seoKeywords}">
  <meta name="description" content="${article.seoDescription}">
  <meta name="_csrf" content="${_csrf.token}"/>
  <meta name="_csrf_header" content="${_csrf.headerName}"/>
  [#include 'inc_meta.html'/]
  [#include 'inc_css.html'/]
  [#include 'inc_js.html'/]
  <link rel="stylesheet" href="${files}/vendor/photoswipe/dist/photoswipe.css">
  <link rel="stylesheet" href="${files}/vendor/photoswipe/dist/default-skin/default-skin.css">
  <script src="${files}/vendor/photoswipe/dist/photoswipe.min.js"></script>
  <script src="${files}/vendor/photoswipe/dist/photoswipe-ui-default.min.js"></script>
  <style>
    .article-content img{
      max-width: 100%;
    }
  </style>
</head>
<body>
[#include 'inc_header.html'/]
[#include 'inc_message_box.html'/]
<div class="bg-gray-200">
  <div class="container">
    <nav class="row" aria-label="breadcrumb">
      <ol class="col list-inline my-2">
        <li class="list-inline-item"><a href="${site.url}">首页</a></li>
        [#list channel.paths as c]
          <li class="list-inline-item">/</li>
          <li class="list-inline-item">[@A bean=c/]</li>
        [/#list]
      </ol>
    </nav>
  </div>
</div>
<div class="container mt-4">
  <div class="row">
    <div class="col-lg-8">
      <h3 class="cm-ff-yh">${article.title}</h3>
      [#if article.tags?size gt 0]
      <div class="mt-2">
        [#list article.tags as tag]
        <a href="${dy}/tag/${tag.id?c}" class="ml-1"><span class="badge badge-secondary">${tag.name}</span></a>
        [/#list]
      </div>
      [/#if]
      <div class="mt-2 pb-2 border-bottom small text-muted">
        <span>${format(article.publishDate, 'yyyy-MM-dd HH:mm')}</span>
        [#if article.source??]<span class="ml-2">${article.source}</span>[/#if]
        [#if article.author??]<span class="ml-2">${article.author}</span>[/#if]
        <i class="ml-2 far fa-eye"></i> <span id="views"></span>
        <script>
          axios.get('${api}/article/view/${article.id?c}').then(function (response) {
            $('#views').text(response.data);
          });
        </script>
      </div>
      [#if article.video??]
        <div class="mt-4">
          <video style="max-width:100%;" controls>
            <source src="${article.video}" type="video/mp4">
            您的浏览器不支持视频(Video)标签。
          </video>
        </div>
      [/#if]
      [#if article.audio??]
        <div class="mt-4">
          <audio style="width:100%;" controls>
            <source src="${article.audio}">
            您的浏览器不支持音频(Audio)标签
          </audio>
        </div>
      [/#if]
      [#if article.imageList?size > 0]
        <div class="pt-2">
          [#list article.imageList as image]
            <figure class="figure mt-3">
              <img src="${image.url}" class="figure-img img-fluid gallery-img" alt="${image.description}">
              <figcaption><span class="mr-2"><strong>${image_index+1}</strong>/${article.imageList?size}</span>${image.description}</figcaption>
            </figure>
          [/#list]
        </div>
      [/#if]
      <div class="mt-4 article-content">[#noescape]${article.text!}[/#noescape]</div>
      [#if article.fileList?size > 0]
        <div class="mt-4 bg-light">附件下载</div>
        <ul class="mt-2 list-unstyled small">
          [#list article.fileList as file]
            <li><i class="fas fa-download text-primary"></i> <a class="article-download">${file.name}</a></li>
          [/#list]
        </ul>
        <script>
          axios.get('${api}/article/download-params/${article.id?c}').then(function (response) {
            $('.article-download').each(function (index, element) {
              $(element).attr('href', '${dy}/download-file/${article.id?c}/' + index + '?' + response.data)
            });
          })
        </script>
      [/#if]
      <div class="lead d-flex justify-content-center text-info">
        <div class="cm-pointer" onclick="voteUp()"><i class="far fa-thumbs-up"></i> <span id="ups"></span></div>
        <div class="cm-pointer ml-4" onclick="voteDown()"><i class="far fa-thumbs-down"></i> <span id="downs"></span></div>
      </div>
      <script>
        function voteUp() {
          fetchCsrf().then(function() {
            request.post('${api}/article/up/${article.id?c}').then(function (response) {
              if (response.data <= 0) {
                alert("您已经参与过一次！");
                return;
              }
              $('#ups').text(response.data);
            });
          });
        }

        function voteDown() {
          fetchCsrf().then(function() {
            request.post('${api}/article/down/${article.id?c}').then(function (response) {
              if (response.data <= 0) {
                alert("您已经参与过一次！");
                return;
              }
              $('#downs').text(response.data);
            });
          });
        }

        axios.get('${api}/article/buffer/${article.id?c}').then(function (response) {
          $('#ups').text(response.data.ups);
          $('#downs').text(response.data.downs);
        });
      </script>

      <ul class="mt-4 list-unstyled">
        [@ArticleNext id=article.id order=article.order channelId=article.channelId isDesc=article.channel.orderDesc; bean]
          <li class="text-truncate mt-2">
            <strong>上一条：</strong>[#if bean??][@A bean=bean class="cm-link"/][#else]没有了[/#if]
          </li>
        [/@ArticleNext]
        [@ArticlePrev id=article.id order=article.order channelId=article.channelId isDesc=article.channel.orderDesc; bean]
          <li class="text-truncate mt-2">
            <strong>下一条：</strong>[#if bean??][@A bean=bean class="cm-link"/][#else]没有了[/#if]
          </li>
        [/@ArticlePrev]
      </ul>

      <h5 class="mt-4 border-bottom"><span class="cm-block-head-bottom">相关新闻</span></h5>
      [@EsArticleList q=article.title excludeId=article.id limit=5; list]
        <ul class="list-unstyled mt-3">
          [#list list as bean]
            <li class="text-truncate mt-2">[@A bean=bean class="cm-link"/]</li>
          [/#list]
        </ul>
      [/@EsArticleList]
    </div>
    [#include 'inc_right.html'/]
  </div>
</div>

<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
  <!-- Background of PhotoSwipe. It's a separate element as animating opacity is faster than rgba(). -->
  <div class="pswp__bg"></div>
  <!-- Slides wrapper with overflow:hidden. -->
  <div class="pswp__scroll-wrap">
    <!-- Container that holds slides. PhotoSwipe keeps only 3 of them in the DOM to save memory. Don't modify these 3 pswp__item elements, data is added later on. -->
    <div class="pswp__container">
      <div class="pswp__item"></div>
      <div class="pswp__item"></div>
      <div class="pswp__item"></div>
    </div>
    <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
    <div class="pswp__ui pswp__ui--hidden">
      <div class="pswp__top-bar">
        <!--  Controls are self-explanatory. Order can be changed. -->
        <div class="pswp__counter"></div>
        <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
        <!--<button class="pswp__button pswp__button&#45;&#45;share" title="Share"></button>-->
        <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
        <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
        <!-- Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR -->
        <!-- element will get class pswp__preloader--active when preloader is running -->
        <div class="pswp__preloader">
          <div class="pswp__preloader__icn">
            <div class="pswp__preloader__cut">
              <div class="pswp__preloader__donut"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
        <div class="pswp__share-tooltip"></div>
      </div>
      <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
      <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>
      <div class="pswp__caption">
        <div class="pswp__caption__center"></div>
      </div>
    </div>
  </div>
</div>

<script>
  var initPhotoSwipeFromDOM = function (gallerySelector) {
    var onClick = function (e) {
      e = e || window.event;
      e.preventDefault ? e.preventDefault() : e.returnValue = false;

      var eTarget = e.target || e.srcElement;
      var index = eTarget.getAttribute('data-index');
      if (index >= 0) {
        // open PhotoSwipe if valid index found
        openPhotoSwipe(parseInt(index, 10), gallerySelector);
      }
      return false;
    };

    var parseElements = function (el) {
      var numNodes = el.length,
              items = [],
              imgEl,
              item;

      for (var i = 0; i < numNodes; i++) {
        imgEl = el[i]; // <img> element
        // create slide object
        // 图片宽高未知，先设置为 0，下面有代码会重新获取图片宽高。
        item = {
          src: imgEl.src,
          w: 0,
          h: 0
        };
        items.push(item);
      }
      return items;
    };

    var openPhotoSwipe = function (index, galleryElement, disableAnimation) {
      var pswpElement = document.querySelectorAll('.pswp')[0],
              options = {index: index},
              items = parseElements(document.querySelectorAll(gallerySelector)),
              gallery;
      if (disableAnimation) options.showAnimationDuration = 0;
      gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
      // 获取图片宽高 https://github.com/dimsemenov/PhotoSwipe/issues/796
      gallery.listen('gettingData', function (index, item) {
        if (item.w < 1 || item.h < 1) { // unknown size
          var img = new Image();
          img.onload = function () { // will get size after load
            item.w = this.width; // set image width
            item.h = this.height; // set image height
            gallery.invalidateCurrItems(); // reinit Items
            gallery.updateSize(true); // reinit Items
          };
          img.src = item.src; // let's download image
        }
      });
      gallery.init();
    };

    var galleryElements = document.querySelectorAll(gallerySelector);
    for (var i = 0, l = galleryElements.length; i < l; i++) {
      galleryElements[i].setAttribute('data-index', i);
      galleryElements[i].onclick = onClick;
      galleryElements[i].style.cursor = 'pointer';
    }
  };
  var $articleImg = $('.article-content img');
  $articleImg.addClass('img-fluid');
  $articleImg.addClass('gallery-img');
  initPhotoSwipeFromDOM('.gallery-img');
</script>
[#include 'inc_footer.html'/]
</body>
</html>
[/#escape]
